<!--查看某个礼卡的详细页面或补卡页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("giftcard.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-col :span="24">
            <el-form ref="form" :model="form" label-width="100px" style="background-color:#ffffff;padding:30px 30px 5px 30px;">
                <el-form-item :label="$t('giftcard.route.tail.cardNo')">
                    <el-input v-model="form.cardNo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.clientName')">
                    <el-col :span="12">
                        <el-input v-model="form.clientFirstName" :placeholder="$t('giftcard.route.tail.clientNameFirstName')" style="width: 100%;" :disabled="true"></el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="form.clientFamilyName" :placeholder="$t('giftcard.route.tail.clientNameFamilyName')" style="width: 100%;" :disabled="true"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.clientPhone')">
                    <el-input v-model="form.clientPhone" :disabled="true"><i slot="prefix" class="el-input__icon el-icon-phone-outline"></i></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.orginMoney')">
                    <el-input v-model="form.orginMoney" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.balance')">
                    <el-input v-model="form.balanceMoney" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.payWay')">
                    <el-input v-model="form.payWayName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.tail.buyTime')">
                    <el-input v-model="form.addTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="text-align:right">
                    <el-button type="primary" @click="repairGiftCardEvent">{{$t('giftcard.route.tail.repairCardBtn')}}</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
    <repairCard ref="repairCard"></repairCard>
</div>
</template>

<script>
import {
    getGiftcardDetail
} from '../../api/api';
import RepairCard from './repairCard.vue';
export default {
    components: {
        repairCard: RepairCard
    },
    data() {
        return {
            form: {
                cardId: "",
                cardNo: '',
                orginMoney: '',
                clientFamilyName: '',
                clientFirstName: '',
                clientPhone: '',
                payWay: "",
                payWayName: ""
            }
        };
    },
    mounted() {
        this.loadGiftCardDetail(this.$route.params.cardId);
    },
    methods: {
        showMainPage() {
            //显示销售礼卡页面
            this.$router.push({
                path: '/giftcard/index'
            });
        },
        formatPayWay: function () {
            return this.form.payWay == 1 ? this.$t('giftcard.route.cardReport.table.paywayList.cash') : this.form.payWay == 2 ? this.$t('giftcard.route.cardReport.table.paywayList.creditCard') : this.$t('giftcard.route.cardReport.table.paywayList.unknown');
        },
        repairGiftCardEvent() {
            let para = Object.assign({}, this.form);
            this.$refs.repairCard.showPage(para);
        },
        loadGiftCardDetail(i_cardId) {
            this.form.cardId = i_cardId;
            let para = {
                cardId: this.form.cardId
            };
            getGiftcardDetail(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.form = res.data;
                    this.form.cardId = this.form.id;
                    this.form.payWayName = this.formatPayWay();
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: top;
    margin-top: 50px;
    padding: 0px 20px;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
